<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" type="text/css" href="./src/app.css" />
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>Tencent Serverless Fullstack</title>
  </head>

  <body>
    <div id="root">
      <div class="container">
        <a
          class="logo"
          href="https://cloud.tencent.com/product/sf"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            src=""
            alt="Tencent Cloud Logo"
        /></a>
          <img style="margin-left: 50px; margin-bottom: 5px;" src="" 
          alt="Serverless Logo"/>
        </a>

        <section class="title">
          <div class="left title-left">
            <h1>Next generation, serverless cloud</h1>
            <h3>
              Tencent Cloud and Serverless have joined forces to create a
              serverless cloud focused on delivering outcomes, not
              infrastructure. Everything autoscaling; never pay for idle.
            </h3>
          </div>
          <div class="right title-right">
            <img
              class="title-gif"
              src="./src/images/tencent-cloud-hero.gif"
              alt="Serverless Framework CLI - Tencent Cloud"
            />
          </div>
        </section>
<!-- 
        <div class="hero">
          <img src="./src/images/hero.png" />
        </div> -->
        <div class="tagline">
          This is a fullstack app built on tencent serverless components via the serverless
          framework
        </div>

        <div class="user-wrapper">
          <div class="left">
            <h3>User Form</h3>
            <!-- user form -->
            <section class="user-form" action="#">
              <div class="form-item">
                <label for="name">
                  Name:
                </label>
                <input name="name" v-model="form.name" type="text" /><br />
              </div>

              <div class="form-item">
                <label for="email">
                  Email:
                </label>
                <input name="email" v-model="form.email" type="email" /><br />
              </div>

              <div class="form-item">
                <label for="site">
                  Site:
                </label>
                <input name="site" v-model="form.site" type="text" /><br />
              </div>

              <button class="submit-btn" @click="addUser">Submit</button>
            </section>
          </div>
          <div class="right">
            <h3>User List</h3>
            <!-- user list -->
            <section class="user-list">
              <ul v-if="userList.length > 0">
                <li v-for="item in userList" :key="item.id">
                  <p>
                    <b>Name: {{ item.name }}</b>&nbsp;&nbsp;
                    <b>Email: {{ item.email }}</b>&nbsp;&nbsp;
                    <b>Site: {{ item.site }}</b>
                    <button @click="deleteUser(item.name)">x</button>
                  </p>
                </li>
              </ul>
              <span v-else>{{ loading ? 'Loading' : 'No Data'}}</span>
            </section>
          </div>
        </div>
      </div>
    </div>
    <script src="./src/index.js"></script>
  </body>
</html>
